<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title></title>
		<link type="text/css" rel="stylesheet" href="css/a11y-dark.css" />
		<link type="text/css" rel="stylesheet" href="css/readme.css" />
	</head>
	<body>
		<div class="content">
			<div class="list"></div>
			<div class="markdown-html"></div>
			<div class="showList">
				目录
			</div>
		</div>
		<script src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script>
		<script src="//cdn.bootcss.com/markdown-it/4.4.0/markdown-it.min.js"></script>
		<script src="js/highlight.pack.js"></script>
		<script>
			var keyMap = location.search.substr(1).split('&').reduce(function(r, it) {
				var them = it.split('=');
				var o = {};
				if (them[0]) {
					o[them[0]] = them[1];
				};
				return o;
			}, {});
			$.ajaxSetup({
				async: false
			});
			$.get(keyMap.md + '.md', function(text) {
				var md = new markdownit({
					//代码高亮
					highlight: function(str, lang) {
						if (lang && hljs.getLanguage(lang)) {
							try {
								return '<pre class="hljs"><code>' +
									hljs.highlight(lang, str, true).value +
									'</code></pre>';
							} catch (__) {}
						}
						return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
					}
				});
				$('.markdown-html').html(md.render(text));
			});
			$(document).ready(function() {
				$("h1,h2,h3,h4,h5,h6").each(function(i, item) {
					var tag = $(item).get(0).localName;
					$(item).attr("id", "wow" + i).attr("class", "wow");
					$(".list").append('<a class="new' + tag + '" href="#wow' + i + '">' + $(item).text() +
						'</a></br>');
				});

				$(window).on('scroll', function() {
					var scrollTop = $(window).scrollTop(),
						len = $('.list a').length - 1;

					for (; len > -1; len--) {
						var that = $(".wow").eq(len);
						if (scrollTop >= that.offset().top - 10) {
							$('.list a').removeClass('current').eq(len).addClass('current');
							break;
						}
					}
				});
				$('.list a').on('click', function(e) {
					e.preventDefault();
					$('html, body').animate({
						'scrollTop': $($(this).attr('href')).offset().top
					}, 300);
				});
			});
			$(window).resize(function(e) {
				if (e.target.innerWidth <= 700) {
					bindClick();
				} else {
					$('.showList').unbind('click');
					$(document).unbind('click');
					$('.list').attr("style", "");
					$('.showList').attr("style", "")
				}
			});
			if (window.innerWidth <= 700) {
				bindClick();
			}

			function bindClick() {
				$('.showList').click(function() {
					$('.list').css({
						boxShadow: "10px 0 10px 10px rgba(0,0,0,.1)",
						transform: "translateX(0)"
					});
					$('.showList').css({
						transform: "translateX(-31px)"
					});
				});
				$(document).click(function(e) {
					if (e.target != $('.list')[0] && e.target != $('.showList')[0]) {
						$('.list').css({
							boxShadow: "none",
							transform: "translateX(-241px)"
						});
					}
					if (e.target != $('.showList')[0]) {
						$('.showList').css({
							transform: "translateX(0)"
						});
					}
				});
			}
		</script>
	</body>
</html>
